<template>
  <DialogAddCategory  ref="addCategory"  :type="type" :reload="getCategory"  />
  <el-card class="swiper-container">
    <div class="header">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
        >增加</el-button
      >
      <el-popconfirm
        title="确定删除吗？"
        confirmButtonText="确定"
        cancelButtonText="取消"
        @confirm="handleDelete"
      >
        <template #reference>
          <el-button type="danger" size="small" icon="el-icon-delete"
            >批量删除</el-button
          >
        </template>
      </el-popconfirm>
    </div>
    <el-table
      :load="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="categoryName" label="分类名称"> </el-table-column>
      <el-table-column prop="categoryRank" label="排序值" >
      </el-table-column>
      <el-table-column prop="createTime" label="添加时间" >
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleEdit(scope.row.categoryId)"
            >修改</a
          >
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleNext(scope.row)"
            >下级分类</a
          >
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="handleDeleteOne(scope.row.categoryId)"
          >
            <template #reference>
              <a style="cursor: pointer">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>

</template>

<script>
import {reactive,ref,toRefs,onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from '@/utils/axios'
import DialogAddCategory from '@/components/DialogAddCategory'
import { ElMessage } from 'element-plus';
export default {
  name: "Category",
  components:{
    DialogAddCategory
  },
  setup(){
      const route=useRoute()   //声明路由参数
      const router=useRouter()
      const addCategory=ref(null)
      const state=reactive({
          loading:false,
          tableData:[],
          multipleSelection:[],  //选中项
          total:0,
          currentPage:1,
          pageSize:10,
          type:'add',
          level:1,
          parent_id:0,
      })
      onMounted(()=>{
          getCategory()
      })
      // 获取分页列表
      const getCategory=()=>{
          const {level=1,parent_id=0}=route.query
          console.log('level',level);
          console.log('parent_id',parent_id);
          state.loading=true
          axios.get('/categories',{
              params:{
                  pageNumber:state.currentPage,
                  pageSize:state.pageSize,
                  categoryLevel:level,
                  parentId:parent_id
              }
          }).then(res=>{
              state.tableData=res.list
              state.total=res.totalCount
              state.currentPage=res.currPage
              state.loading=false
              state.level=level
              state.parentId=parent_id
          })
      }
      // 切换页码
      const changePage=(val)=>{
        state.currentPage=val
        getCategory()

      }
      //新增
      const handleAdd=()=>{
        state.type='add'
        addCategory.value.open()
      }
      //修改
      const handleEdit=(id)=>{
        state.type='edit'
        addCategory.value.open(id)
      }
      //批量选择
      const handleSelectionChange=(val)=>{
        state.multipleSelection=val
      }
      //批量删除
      const handleDelete=()=>{
        console.log(state.multipleSelection);
        if(!state.multipleSelection.length){
          ElMessage.error('请至少选阿泽一项')
          return
        }
        axios.delete('/categories',{
          data:{
            ids:state.multipleSelection.map(i=>i.categoryId)
          }
        }).then(()=>{
          ElMessage.success('删除成功')
          getCategory()
        })
      }
      //单个删除
      const handleDeleteOne=(id)=>{
        axios.delete('/categories',{
          data:{
            ids:[id]
          }
        }).then(()=>{
          ElMessage.success('删除成功')
          getCategory()
        })
      }
      //查看下级分类
      const handleNext=(item)=>{
        
        const levelNumber =item.categoryLevel+1
        if(levelNumber==4){
          ElMessage.error('没有下一级')
          return 
        }
        router.push({
          name:`level${levelNumber}`,
          query:{
            level:levelNumber,
            parent_id:item.categoryId
          }
        })
      }
    return {
        ...toRefs(state),
        route,
        router,
        addCategory,
        changePage,
        handleAdd,
        handleDelete,
        handleEdit,
        handleDeleteOne,
        handleSelectionChange,
        handleNext
    }
  }
};
</script>

<style>
</style>